<template>
    <footer class="app-footer">
        <!-- 联系我们 -->
        <div class="contact">
            <div class="container">
                <dl>
                    <dt>客户服务</dt>
                    <dd>
                        在线客服<el-icon class="iconfont"><Service /></el-icon>
                    </dd>
                    <dd>
                        问题反馈<el-icon class="iconfont"
                            ><ChatDotRound
                        /></el-icon>
                    </dd>
                </dl>
                <dl>
                    <dt>关注我们</dt>
                    <dd>
                        公众号<el-icon class="iconfont"><Promotion /></el-icon>
                    </dd>
                    <dd>
                        敬请期待<el-icon class="iconfont is-loading"
                            ><Loading
                        /></el-icon>
                    </dd>
                </dl>
                <dl>
                    <dt>下载APP</dt>
                    <dd class="qrcode">
                        <img src="../assets/images/gitee.png" />
                    </dd>
                    <dd class="download">
                        <span>扫描二维码</span>
                        <span>立马下载APP</span>
                        <a
                            href="https://gitee.com/MingyueIQ/tianzhongli"
                            target="_blank"
                            >项目地址</a
                        >
                    </dd>
                </dl>
                <dl>
                    <dt>服务热线</dt>
                    <dd class="hotline">
                        158-3704-3896 <small>周一至周日 8:00-18:00</small>
                    </dd>
                </dl>
            </div>
        </div>
        <!-- 其它 -->
        <div class="extra">
            <div class="container">
                <div class="copyright">
                    <p>
                        <a href="javascript:;">关于我们</a>
                        <a href="javascript:;">帮助中心</a>
                        <a href="javascript:;">售后服务</a>
                        <a href="javascript:;">配送与验收</a>
                        <a href="javascript:;">商务合作</a>
                        <a href="javascript:;">搜索推荐</a>
                        <a href="javascript:;">友情链接</a>
                    </p>
                    <p>
                        CopyRight ©
                        <a href="https://gitee.com/MingyueIQ" target="_blank"
                            >明月</a
                        >
                    </p>
                    <p>
                        备案号<el-icon style="vertical-align: middle"
                            ><Checked
                        /></el-icon>
                        <a
                            href="https://beian.miit.gov.cn/#/Integrated/index"
                            target="_blank"
                            >豫ICP备2022028019号-1</a
                        >
                    </p>
                </div>
            </div>
        </div>
    </footer>
</template>

<script setup></script>

<style scoped lang="scss">
.app-footer {
    overflow: hidden;
    background-color: #f5f5f5;
    padding-top: 20px;
    .contact {
        background: #fff;
        .container {
            padding: 60px 0 40px 25px;
            display: flex;
        }
        dl {
            height: 190px;
            text-align: center;
            padding: 0 72px;
            border-right: 1px solid #f2f2f2;
            color: #999;
            &:first-child {
                padding-left: 0;
            }
            &:last-child {
                border-right: none;
                padding-right: 0;
            }
        }
        dt {
            line-height: 1;
            font-size: 18px;
        }
        dd {
            margin: 36px 12px 0 0;
            float: left;
            width: 92px;
            height: 92px;
            padding-top: 10px;
            border: 1px solid #ededed;

            .iconfont {
                font-size: 36px;
                display: block;
                color: #666;
                margin-left: 27px;
                margin-top: 5px;
                transition: color 0.3s ease;
            }
            &:hover {
                .iconfont {
                    color: #da9233;
                    cursor: pointer;
                }
            }
            &:last-child {
                margin-right: 0;
            }
        }
        .qrcode {
            width: 92px;
            height: 92px;
            padding: 7px;
            border: 1px solid #ededed;
        }
        .download {
            padding-top: 5px;
            font-size: 14px;
            width: auto;
            height: auto;
            border: none;
            span {
                display: block;
            }
            a {
                display: block;
                line-height: 1;
                padding: 10px 25px;
                margin-top: 5px;
                color: #fff;
                border-radius: 2px;
                background-color: #d68215c2;
                transition: all 0.3s ease;
                &:hover {
                    background-color: #de830b;
                }
            }
        }
        .hotline {
            padding-top: 20px;
            font-size: 22px;
            color: #666;
            width: auto;
            height: auto;
            border: none;
            small {
                display: block;
                font-size: 15px;
                color: #999;
            }
        }
    }
    .extra {
        background-color: #333;
    }
    .slogan {
        height: 178px;
        line-height: 58px;
        padding: 60px 100px;
        border-bottom: 1px solid #434343;
        display: flex;
        justify-content: space-between;
        a {
            height: 58px;
            line-height: 58px;
            color: #fff;
            font-size: 28px;
            i {
                font-size: 50px;
                vertical-align: middle;
                margin-right: 10px;
                font-weight: 100;
            }
            span {
                vertical-align: middle;
                text-shadow: 0 0 1px #333;
            }
        }
    }
    .copyright {
        height: 170px;
        padding-top: 40px;
        text-align: center;
        color: #999;
        font-size: 15px;
        p {
            // line-height: 1;
            margin-bottom: 10px;
        }
        a {
            color: #999;
            line-height: 1;
            padding: 0 10px;
            border-right: 1px solid #999;
            transition: all 0.3s ease;
            &:hover {
                color: #de830b;
            }
            &:last-child {
                border-right: none;
            }
        }
    }
}
</style>
